<template>
  <u-popup v-model="showoppen" mode="bottom" @close="close" border-radius="30">
    <view class="hgzbox" style="height: 660rpx;">
      <view class="xsquy" style="border-bottom: 0px solid #EEEEEE;">
        {{title}}
      </view>
      <u-picker class="cheliquyu" style="margin-top: 70px !important;" confirm-color="#343434" cancel-color="#FFE23E"
        :mode="modesc" :start-year="dqtime" :defaultTime="defaultTimesc" v-model="showoppen" :params="paramssc" @confirm="confirmsc"></u-picker>
    </view>
  </u-popup>
</template>

<script>
  export default {
    name: 'ctime',
    props: ['showsc', 'title','dqtime'],
    data() {
      return {
        defaultTimesc: new Date().toISOString().slice(0, 10),
        paramssc: {
          year: true,
          month: true,
          day: true,
          hour: false,
          minute: false,
          second: false
        },
        modesc: 'time',
        showoppen: false,
      };
    },
    watch: {
      showsc(value) {
        this.showoppen = value
      }
    },
    methods: {
      // 点击确定调用函数
      confirmsc(e) {
        this.$emit('confirmTime', e)
      },
      // 遮罩层关闭时调用函数
      close() {
        this.$emit('closeTime')
      }
    }
  }
</script>

<style lang="scss">
  @mixin dingwei() {
    /* 定义flex容器 */
    display: flex;
    /*设置容器内部容器的排列方向*/
    flex-direction: row;
  }

  @mixin danhang1() {
    /* 单行...*/
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  @mixin imgsize() {
    width: 100%;
    height: 100%;
  }

  @mixin colorbj() {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50rpx;
  }

  @mixin shuanghang2() {
    /* 两行...*/
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: normal !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  @mixin justify() {
    display: -webkit-flex;
    /* Safari */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .hgzbox {
    font-family: PingFang SC;
    font-weight: 500;
    text-align: center;

    .xsquy {
      font-size: 36rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(54, 54, 54, 1);
      border-bottom: 1px solid #EEEEEE;
      line-height: 96rpx;
      text-align: left;
      padding-left: 42rpx;
    }

    .quguo {
      font-size: 36rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(102, 102, 102, 1);
      margin-top: 21rpx;
    }

    .cityquxdz {
      width: 750rpx;
      height: 64rpx;
      background: rgba(241, 241, 241, 1);
      /* margin-top: 26rpx; */
      @include dingwei;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(146, 146, 146, 1);

      .shenfdz {
        width: 50%;
        line-height: 64rpx;
      }

      .shif {
        width: 50%;
        line-height: 64rpx;
      }
    }

    .cityqux {
      width: 750rpx;
      height: 64rpx;
      background: rgba(241, 241, 241, 1);
      margin-top: 26rpx;
      @include dingwei;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(146, 146, 146, 1);

      .shenf {
        width: 50%;
        line-height: 64rpx;
      }

      .shif {
        width: 50%;
        line-height: 64rpx;
      }
    }

    .hgztitle {
      border-bottom: 1px solid #EEEEEE;
      line-height: 96rpx;
      font-size: 36rpx;
      color: rgba(51, 51, 51, 1);
    }

    .imgtexts {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(102, 102, 102, 1);
      line-height: 96rpx;
      border-bottom: 1px solid #EEEEEE;
    }

    .hgxz {
      line-height: 120rpx;
      font-size: 32rpx;
      color: rgba(102, 102, 102, 1);
    }

    .sucai {
      @include dingwei;
      border-bottom: 1px solid #EEEEEE;

      .sucaitext {
        width: 50%;
        line-height: 120rpx;
        text-align: center;
        font-size: 34rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
    }
  }

  // 发布新车 弹框
  .cheliquyu {
    height: 500rpx;
    margin-top: 260rpx;

    /deep/ .u-mask-show {
      background-color: rgba(0, 0, 0, 0) !important;
      display: none;
    }

    /deep/ .u-picker-header {
      margin: 0 auto;
      padding: 0 42rpx;
    }

    /deep/ .u-btn-picker--primary {
      margin-top: 1090rpx;
      z-index: 99;
      width: 334rpx;
      height: 88rpx;
      background: linear-gradient(-90deg, rgba(251, 211, 33, 1), rgba(255, 226, 62, 1));
      border-radius: 0px 50rpx 50rpx 0px;
      line-height: 60rpx;
    }

    /deep/ .u-btn-picker--tips {
      margin-top: 1090rpx;
      z-index: 99;
      width: 334rpx;
      height: 88rpx;
      background: rgba(52, 52, 52, 1);
      border-radius: 50rpx 0px 0px 50rpx;
      line-height: 60rpx;
    }

    /deep/ .uni-picker-view-indicator {
      height: 80rpx;
      top: 50%;
    }

    /deep/ .uni-picker-view-indicator {
      border-top: 1px solid #FBB000;
      border-bottom: 1px solid #FBB000;
    }

    /deep/ .u-content {
      border-radius: 44rpx 0px 0px 44rpx !important;
    }

    /deep/ .u-drawer-content-visible {
      height: 666rpx !important;
    }
  }
</style>
